<template>
	<view class="switch-wrap">
		<view class="pl-2 pr-2 ">

			<!-- <u-radio icon-size="30" shape="circle" v-for="(item, index) in hourseList" :key="index" :name='index'>
				<view class="">
					
				
					<view > <image style="margin-right: 20rpx;width:40rpx;height:40rpx" src="../../static/image/loufang.png"></image>{{item.city}}{{item.district}}{{item.proName}}</view>
					<view class="flex">
						<view class="switch-box-text u-font-28 u-m-t-12 u-m-b-12" style="color: #333;">
						{{item.buildDistrictCode}}-{{item.buildTowerCode}}-{{item.roomUnitNumber}}-{{item.roomCode}}
						</view>
						<view ><span style="color: #999;">面积：</span>{{item.roomAreaOfStructure}}㎡</view>
					</view>
				</view>
			</u-radio> -->


			<view class="flex bg-white p-3 mt-2 rounded-2 shadow" v-for="(item, index) in hourseList" :key="index"
				:name='index' @click="qiehuan(item)">
				<u-checkbox size="30" active-color="#28a745" shape="circle" v-model="item.remove"></u-checkbox>
				<view class="u-m-l-30 u-flex-1">
					<view style="display:flex;color: #333;justify-content:space-between;"
						class="switch-box-text u-font-32 u-m-t-12 u-m-b-12">
						<view style="display:flex;align-items: center;font-size: 34rpx;">
							<image style="margin-right: 20rpx;width:40rpx;height:40rpx"
								src="../../static/image/loufang.png"></image>
							{{item.city}}{{item.district}}{{item.proName}}
						</view>
					</view>
					<view style="display:flex;justify-content:space-between;align-items: center;">
						<view class="switch-box-text u-font-28 u-m-t-12 u-m-b-12" style="color: #333;">
							{{item.buildDistrictCode}}-{{item.buildTowerCode}}-{{item.roomUnitNumber}}-{{item.roomCode}}
						</view>

						<view><span style="color: #999;">面积：</span>{{item.roomAreaOfStructure}}㎡</view>
					</view>

				</view>
			</view>

		</view>

		<view class="bill-deta-btn">
			<button @click="switchBtn" class="yilingqu">确认切换</button>
		</view>
		<u-modal @confirm='queryBtn' title='切换房屋' :zoom='false' v-model="modelShow" :show-cancel-button='true'
			confirm-color="#F9A832">
			<view class="u-p-t-30 u-p-l-50 u-font-28" style="display: flex;">
				<image src="../../static/image/loufang.png" style="margin-right: 20rpx;width:40rpx;height:40rpx"
					mode=""></image>
				{{hourseList[value].proName}}
			</view>
			<view class="u-p-t-30 u-p-l-50 u-font-28 u-p-b-40 ">
				楼号：{{hourseList[value].buildDistrictCode + '-' +
					hourseList[
						value].buildTowerCode + '-' + hourseList[value].roomUnitNumber + '-' + hourseList[value]
					.roomCode}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check: true,
				radio: '',
				list: [{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 0,
				hourseList: [],
				modelShow: false,
				content: null,
			}
		},
		onShow() {
			this.value = uni.getStorageSync('hourseNum') || 0
			this.hourseList = uni.getStorageSync('hourseList')
			// let projectitem=uni.getStorageSync('projectItem').ownerId
			this.hourseList.forEach((item,index)=>{
				if(item.roomId===uni.getStorageSync('projectItem').roomId){
					this.hourseList[index].remove=true
				}
			})
			console.log(this.hourseList)
		},
		methods: {
			qiehuan(i) {
				this.hourseList.forEach((item, index) => {
					if (i.roomId != item.roomId) {
						this.hourseList[index].remove= false
						// item=false
					}else{
						this.hourseList[index].remove= true
					}
				})
				uni.setStorageSync('hourseList', '')
				console.log(this.hourseList)
			},
			// 展示切换的模态窗
			switchBtn() {
				this.modelShow = true
				this.hourseList.forEach((item, index) => {
					if (item.remove) {
						this.value = index
					}
				})
				uni.setStorageSync('hourseList', this.hourseList)
				console.log(this.hourseList)

			},
			queryBtn() {
				// this.value
				//uni.setStorageSync('hourseList', this.hourseList)
				uni.setStorageSync('hourseNum', this.value)
				uni.setStorageSync('projectItem', this.hourseList[this.value])
				this.$Router.pushTab({
					path: '/pages/index/newIndex'
				})
			}
		}

	}
</script>

<style lang="scss">
	// .switch-wrap {
	// 	.u-radio-group {
	// 		display: block !important;
	// 	}
	// }
	.bill-deta-btn {
		width: 100%;
		margin-top: 60rpx;

		.pay {
			background: #ff9900 !important;
			color: #fff;
		}

		.yilingqu {
			width: 80%;
			height: 84rpx;
			// background:#F9A832;
			// background-color: #F9A832;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}

		.guar-back-w i {
			width: 6px;
			height: 16px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-top: -3px;
		}
	}

	page {
		background: #f4f4f4;
	}


	.switch-wrap {
		width: 100vw;
		height: auto;
		background: #F4F4F4;
		overflow: hidden;

		.u-radio {
			height: 184rpx;
			background: #fff;
			padding: 20rpx 30rpx;
			margin-top: 20rpx;

			.switch-box-text {
				// width: calc(100vw - 80rpx);
				width: 100%
			}

			.switch-radio {
				width: 56rpx;
				height: 56rpx;
				top: 64rpx;
				right: 42rpx;
			}
		}
	}
</style>